<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>设计器</title>
    <style>
        .work {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            padding-top: 40px;
            overflow: hidden;
        }

        .form-container {
            position: relative;
            width: 100%;
            height: 100%;
        }

        .form-container > div {
            position: absolute;
            width: 100%;
            height: 100%;
        }

        .form-container > div:first-child {
            top: 0px;
            left: 0px;
            width: 90px;
            border: 1px solid #7c7c7c;
            background-image: url('/assets/img/note-bj.png');
            z-index: 2;
        }

        .form-container > div:first-child ul {
            list-style: none;
            padding-left: 0px;
            line-height: 40px;
        }

        .form-container > div:first-child ul li {
            padding-left: 10px;
            border: 1px solid #bfbfbf;
        }

        .form-container > div:first-child ul li:hover {
            background-color: #7c7c7c;
        }

        .form-container > div:first-child ul li:active {
            background-color: #000000;
        }

        .form-container > div:last-child {
            top: 0px;
            left: 0px;
            padding-left: 90px;
            width: 100%;
            border: 1px solid #7c7c7c;
            z-index: 0;
            background-image: url("/assets/js/workflow/images/workflow_background.png");
            background-repeat: repeat;
            background-attachment: scroll;
        }

        #workspace {
            position: relative;
            width: 100%;
            height: 100%;
            overflow: auto;
            z-index: -1;
        }

        .canvas {
            position: absolute;
            top: 0;
            left: 0;
            z-index: 2;
            width: 150%;
            height: 150%;
            z-index: 100;
        }
    </style>

</head>
<body>
<div class="container-fluid" style="height: 100%">
    <div class="row" style="height: 100%">
        <div class="col-lg-12 col-sm-12 col-xs-12" style="height: 100%">
            <div class="widget no-padding" style="height: 100%;width:100%;position: relative;margin-bottom: 0">
                <div class="widget-header bg-themeprimary" style="z-index: 999">
                    <i class="widget-icon typcn typcn-th-list"></i>
                    <span class="widget-caption">流程设计</span>
                </div>
                <div class="widget-body work">
                    <div class="form-container">
                        <div>
                            <ul id="toolbar">

                            </ul>
                        </div>
                        <div>
                            <div id="workspace">
                                <canvas id="canvas" class="canvas"></canvas>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="root" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
     aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="widget no-padding">
                <div class="widget-header bg-themeprimary ">
                    <i class="widget-icon fa fa-group"></i>
                    <span class="widget-caption"></span>
                    <div class="widget-buttons">
                        <a data-dismiss="modal">
                            <i class="fa fa-times"></i>
                        </a>
                    </div>
                </div>
                <div class="widget-body">
                    <div class="widget-main ">
                        <div class="tabbable">
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" id="btnActivityPropOK" class="btn btn-success">
                        确定
                    </button>
                    <button type="button" class="btn btn-danger" data-dismiss="modal">
                        取消
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="ruleProperty" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
     aria-hidden="true">
    <div class="modal-dialog modal-md">
        <div class="modal-content">
            <div class="widget no-padding">
                <div class="widget-header bg-themeprimary ">
                    <i class="widget-icon fa fa-retweet"></i>
                    <span class="widget-caption">规则设置</span>
                    <div class="widget-buttons">
                        <a data-dismiss="modal">
                            <i class="fa fa-times"></i>
                        </a>
                    </div>
                </div>
                <div class="widget-body">
                    <div class="widget-main">

                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" id="btnRulePropOK" class="btn btn-success">
                        确定
                    </button>
                    <button type="button" class="btn btn-danger" data-dismiss="modal">
                        取消
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="save" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
     aria-hidden="true">
    <div class="modal-dialog modal-md">
        <div class="modal-content">
            <div class="widget no-padding">
                <div class="widget-header bg-themeprimary ">
                    <i class="widget-icon fa fa-cloud-upload"></i>
                    <span class="widget-caption"></span>
                    <div class="widget-buttons">
                        <a data-dismiss="modal">
                            <i class="fa fa-times"></i>
                        </a>
                    </div>
                </div>
                <div class="widget-body">
                    <div class="widget-main">
                        <form class="form-horizontal" role="form">
                            <div class="form-group">
                                <label class="col-sm-2 control-label no-padding-right" for="packageName">模板类型</label>
                                <div class="col-sm-10 col-sm-offset-0">
                                    <select name="packageName" id="packageName"> </select>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label no-padding-right" for="templateName">模板名称</label>
                                <div class="col-sm-10 col-sm-offset-0">
                                    <input name="templateName" class="form-control" id="templateName" type="text"
                                           placeholder="模板名称">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label no-padding-right" for="icon">图标</label>
                                <div class="col-sm-10 col-sm-offset-0">
                                    <input name="icon" class="form-control" id="icon" type="text"
                                           placeholder="图标">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label no-padding-right" for="description">描述</label>
                                <div class="col-sm-10 col-sm-offset-0">
                                    <input name="description" class="form-control" id="description" type="text"
                                           placeholder="描述">
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" id="btnEdit" class="btn btn-success">
                            修改当前版本
                        </button>
                        <button type="button" id="btnNewVersion" class="btn btn-success">
                            发布新版本
                        </button>
                        <button type="button" id="btnSaveOK" class="btn btn-success">
                            全新发布
                        </button>
                        <button type="button" class="btn btn-danger" data-dismiss="modal">
                            取消
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    var wf = {
        workspace: $('#workspace')
    }
    function init() {

        wf.mathHelper = new MathHelper();
        wf.mouseOperation = new MouseOperation();
        wf.moveActivity = false;
        wf.moveRule = false;
        wf.canvas = $('#canvas');
        wf.canvasHelper = new CanvasHelper();
        wf.rules = new Array();
        wf.selectedObjects = new Array();
        wf.moveRule = false;
        wf.templateStatus = TemplateStatus.None;
        wf.gcommand = Command.nulloperation;
        wf.mask = $("#divMask");
        toolbar.init($('#toolbar'));
        if (pageParm.template) {
            if (pageParm.template.id) {
                openTemplateId = pageParm.template.id;
                toolbar.wait();
            }
        }
        $("#test").click(function () {
            $("#root").modal();
        })
    }
    function dispose() {
        wf = {};
    }
</script>
</body>
</html>